<template>
  <div>
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="账号">
          <el-input v-model="searchForm.mobile" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="账号归属">
          <el-select v-model="searchForm.type" placeholder="请选择" clearable>
            <el-option label="管理后台" :value="1" />
            <el-option label="供应商后台" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属平台">
          <el-select v-model="searchForm.userId" placeholder="请选择" clearable>
            <el-option v-for="item in memberList" :key="item.id" :label="item.shopname" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="全部" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()">查询</el-button>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" icon="el-icon-plus" @click="openAddDialog()">添加账号</el-button>
      <el-dropdown v-if="$hasMethod('#delete') || $hasMethod('#enable')" trigger="click" @command="handleCommand">
        <el-button size="small" class="add-btn svg-btn">
          <svg-icon icon-class="batch" :size="11" />批量操作
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="$hasMethod('#delete')" command="delete">删除</el-dropdown-item>
          <el-dropdown-item v-if="$hasMethod('#enable')" command="enable">启用</el-dropdown-item>
          <el-dropdown-item v-if="$hasMethod('#enable')" command="disable">禁用</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-table v-show="tableData.length > -1" ref="multipleTable" :data="tableData" border>
      <el-table-column align="center" type="selection" width="55" :selectable="(row, index) => { return row.rules !== '*' }" />
      <el-table-column align="center" prop="id" label="编号" width="70" />
      <el-table-column align="center" prop="mobile" label="账号" />
      <el-table-column align="center" prop="username" label="姓名/备注" />
      <el-table-column align="center" prop="title" label="角色" />
      <el-table-column align="center" label="所属平台" prop="type_name" />
      <el-table-column align="center" prop="admin_name" label="账号归属" />
      <el-table-column align="center" prop="create_time" label="创建时间" width="100" />
      <el-table-column align="center" prop="login_time" label="最后登录时间" width="100" />
      <el-table-column align="center" prop="login_ip" label="最后登录IP" />
      <el-table-column align="center" prop="status" width="80" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.rules !== '*' && $hasMethod('#enable')" class="pointer" :type="scope.row.status == 1 ? 'success' : 'danger'" @click="changeStatus(scope.row.id, scope.row.status)">
            {{ scope.row.status == 1 ? "启用" : "禁用" }}</el-tag>
          <el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">{{ scope.row.status == 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="140">
        <template slot-scope="scope">
          <el-button v-if="scope.row.rules !== '*' && $hasMethod('#edit')" type="primary" size="mini" @click="openAddDialog(scope.row)">编辑</el-button>
          <el-button v-if="scope.row.rules !== '*' && $hasMethod('#delete')" type="danger" size="mini" @click="removeItem(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <custom-page ref="customPage" :total="total" @getList="getList" />
    <add-dialog ref="addDialog" :edit-item="editItem" :role-list="roleList" @getList="getList" />
  </div>
</template>

<script>
import { userList, getMemberList, setUser, delUser, getGroupList } from '@/api/system'
import customPage from '@/components/customPage'
import addDialog from './add'
export default {
  components: { customPage, addDialog },
  data() {
    return {
      searchForm: {
        mobile: '',
        userId: null,
        type: null,
        status: null
      },
      total: 0,
      tableData: [],
      editItem: null,
      memberList: [],
      roleList: []
    }
  },
	created() {
		const promise=new Promise((resolve,reject)=>{
			// resolve('123')
			reject('111')
		})
		console.log(promise);
	},
  mounted() {
    this.getList()
    this.getSelect()
    this.getRoleList()
  },
  methods: {
    // 删除
    removeItem(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delUser(id).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    // 添加/编辑账号
    openAddDialog(val) {
      this.editItem = val || null
      this.$refs.addDialog.dialogVisible = true
    },
    // 批量操作
    handleCommand(command) {
      const list = this.$refs.multipleTable.selection
      if (list.length === 0) {
        this.$message({
          message: '没有勾选项',
          type: 'warning'
        })
        return
      }
      const ids = list.map(item => item.id).join(',')
      switch (command) {
        case 'delete':
          this.removeItem(ids)
          break
        case 'enable':
          this.changeStatus(ids, 0)
          break
        case 'disable':
          this.changeStatus(ids, 1)
          break
        default:
          break
      }
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1
      this.getList()
    },
    // 重置
    reset() {
      this.searchForm = {
        mobile: '',
        userId: null,
        type: null,
        status: null
      }
      this.getList()
    },
    // 启用/禁用
    changeStatus(ids, status) {
      let tip = ''
      let title = ''
      if (status === 1) {
        tip = '您确定要禁用吗？'
        title = '禁用'
      } else {
        tip = '您确定要启用吗？'
        title = '启用'
      }
      this.$confirm(tip, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        setUser({
          ids,
          status: status === 1 ? 0 : 1
        }).then(res => {
          this.getList(true)
        })
      }).catch(() => { })
    },
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage
      if (!flag) {
        this.tableData = []
      }
      userList({
        page,
        pageSize,
        userId: this.searchForm.userId,
        type: this.searchForm.type,
        status: this.searchForm.status === null ? -100 : this.searchForm.status,
        mobile: this.searchForm.mobile
      }).then(res => {
        this.tableData = res.data || []
        this.total = res.total
      })
    },
    getSelect() {
      getMemberList().then(res => {
        this.memberList = res || []
      })
    },
    getRoleList() {
      getGroupList().then(res => {
        this.roleList = res || []
      })
    }
  }
}
</script>

<style lang="scss">
</style>
